<template>
	<view :class="currentTheme">
		<a-nabbar :name="pageTitle" />
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
			<view class="u-padding-10">
				<eimlFlowLayout :list="dataList" v-if="dataList.length"  :columnNum="2" @addCar="addCar" @goBuy="goBuy" :isNov="isNov" :isGroupBuy="isGroupBuy"/>
				<!-- <view v-for="(item,index) in dataList" :key="index" class="ticket-box">
					<item-box class="u-flex u-row-center" :padding="28">
						<view class="">
							<view class="u-position-relative">
								<item-image :img="item.image" :width="imageWidth" :height="imageHeight" :radius="10"
									@click.native="previewBanner(item.sliderImage)" />
									<view class="left-tag" v-if="item.issueModeName">
										<item-image :img="item.tagImage" :width="90" :height="90" :radius="0"></item-image>
									</view>
							</view>
							<view class="u-padding-top-20 text-white u-font-26 item-name">{{item.name}}</view>
							<view class="tag u-flex u-flex-wrap u-margin-bottom-10" v-if="item.categoryDescription.length">
								<view class="u-margin-right-10 u-margin-bottom-10 " v-for="(c,i) in item.categoryDescription" :key="i" >
									<u-tag :text="c"  size="mini" shape="circle" bg-color="#484850" border-color="#484850" color="#D0D2F9"/>
								</view>
							</view>
							<view class="u-margin-bottom-20 u-flex">
								<text class="u-font-28 text-white">￥{{item.exhibitPrice || 0}}</text>
								<view class="u-font-24 text-color-777584 u-padding-left-24 price-item">￥{{item.price}}</view>
							</view>
							<view class="u-flex u-row-between">
								<view class="text-color-A6A8CD u-font-22">
									<view>{{item.sales || 0}}人</view>
									<view>已付款</view>
								</view>
								<view class="u-padding-top-24 u-padding-bottom-10" v-if="isGroupBuy">
									<view class="groupBuy-btn" @click="goBuy(item)">参加团购</view>
								</view>
								<view class="u-flex" v-if="isNov">
									<view class="car-btn" @click="addCar(item)">
										<u-icon name="gouwuche" custom-prefix="custom-icon" size="30" color="white"></u-icon>
									</view>
									<view class="buy-btn u-font-28" @click="goBuy(item)">购买</view>
								</view>
							</view>
						</view>
					</item-box>
				</view> -->
			</view>
		</mescroll-body>
		<view class="u-position-fixed activity-btn" @click="previewActivity" v-if="isNov">活动规则</view>
		<view class="car" @click="goCar" v-if="loginForm.uid">
			<u-badge type="error" :count="count" size="mini" :offset="[-5,50]">
			</u-badge>
			<view class="u-margin-left-20 u-margin-top-5">
				<u-icon name="gouwuche" custom-prefix="custom-icon" color="white" size="40"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		add,
		getList,
		getDetail
	} from '@/api/crud.js'
	import upCallback from '@/mixins/upCallbackMixin.js'
	import settlement from '@/mixins/settlement.js'
	import eimlFlowLayout from './eiml-flow-layout.vue'
	export default {
		components: {
			eimlFlowLayout
		},
		mixins: [settlement, upCallback],
		data() {
			return {
				apiModule: 'shopApi',
				apiType: 'product',
				loading: false,
				dataList: [],
				name: "thirdQuery",
				count:0,
				form: {
					types: '',
				},
				pageTitle: "",
				imageWidth:0,
				imageHeight:0,
				type:'groupBuy'
			};
		},
		onLoad(option) {
			this.form.types = option.pageType || "groupBuy"
			this.type = option.pageType || "groupBuy"
			this.pageTitle = option.title || '团购'
		},
		onShow() {
			if(this.loginForm.uid) this.carCount();
		},
		computed: {
			isNov() {
				return this.form.types === "1111"
			},
			isGroupBuy() {
				return this.form.types === "groupBuy"
			},
		},
		methods: {
			dataListCallBack(){
				this.dataList = this.dataList.map(val=>{
					const category = val.categoryDescription
					if(!Array.isArray(category)) val.categoryDescription = category ? category.split(',') : [];
					if(val.issueModeName){
						const tagImage = {
							'城限': 'cx',
							'独家': 'dj',
							'盒装': 'hz',
							'实景': 'sj',
						}[val.issueModeName]
						val.tagImage = `https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/${tagImage}.png`
					}
					return val
				})
			},
			goCar(){
				this.$u.route({
					url:'/pagesA/car/car'
				})
			},
			//添加到购物车
			addCar(item){
				this.loginValidate().then(res=>{
					add({productId:item.productId,uid:this.loginForm.uid,cartNum:1,mallProductId:item.mallProductId,type:this.type},'cart',this.apiModule).then(res=>{
						this.$u.toast('添加成功')
						this.carCount()
					})
				})
			},
			goBuy(item) {
				this.loginValidate().then(res => {
					this.settlement([{
						productId: item.id,
						mallProductId:item.mallProductId,
						productNum: 1
					}])
				})
			},
			//获取购物车总数
			carCount(){
				getDetail({uid:this.loginForm.uid},'cart',this.apiModule,'list').then(res=>this.count = res.length)
			},
			previewImage(img) {
				this.previewUrls([img])
			},
			// 预览banner
			previewBanner(images){
				const banner = images.split(',');
				this.previewUrls(banner)
			},
			// 查看活动规则
			previewActivity(){
				const image  = 'https://larp-gbo.oss-cn-chengdu.aliyuncs.com/wx/activityrole.png';
				this.previewImage(image)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.price {
		color: #808080;
		text-decoration: line-through;
		white-space: nowrap;
	}

	.groupBuy-btn {
		line-height: 74rpx;
		color: white;
		text-align: center;
		background: #765CFE;
		border-radius: 37rpx;
	}

	.ticket-content {
		flex-wrap: wrap;
	}

	.ticket-box {
		box-sizing: border-box;
		padding: 10rpx;
		flex-shrink: 0;
	}
	.activity-btn{
		right: 0;
		top: 200rpx;
		line-height: 70rpx;
		padding: 0 10rpx 0 20rpx;
		background-color: var(--theme-color);
		color: white;
		border-radius: 50rpx 0 0 50rpx;
	}
	.buy-btn{
		background-color: var(--theme-color);
		color: var(--reversal-color);
		border-radius: 0 50rpx 50rpx 0;
		width: 100rpx;
		line-height: 50rpx;
		height: 50rpx;
		text-align: center;
	}
	.car-btn{
		width: 71rpx;
		height: 50rpx;
		border-radius: 50rpx 0 0 50rpx;
		border: 1rpx solid #FFFFFF;
		border-right: none;
		text-align: center;
		line-height: 50rpx;
	}
	.car{
		position: fixed;
		bottom: 200rpx;
		right: 0;
		z-index: 55;
		width: 74rpx;
		height: 56rpx;
		background: var(--theme-color);
		border-radius: 50rpx 0 0 50rpx ;
	}
	.left-tag{
		position: absolute;
		left: 0;
		top: 0;
	}
	.price-item{
		text-decoration:line-through;
	}
</style>
